<template>
<!--报名页面-->
	<view class="main_section">
    <view class="title_section">
      <view class="title">报名表</view>
    </view>

    <view class="form_section">
      <fui-form ref="form">
        <!--      姓名*-->
        <view class="form-item">
          <text class="label">姓名 <text class="red_color">*</text></text>
          <fui-input  placeholder="请输入姓名" v-model="formData.name"></fui-input>
        </view>
        <!--      电话*-->
        <view class="form-item">
          <text class="label">电话 <text class="red_color">*</text></text>
          <fui-input  placeholder="请输入电话" v-model="formData.phone"></fui-input>
        </view>
        <!--      企业*-->
        <view class="form-item">
          <text class="label">所属企业 <text class="red_color">*</text></text>
          <fui-input  placeholder="请输入企业" v-model="formData.enterprise"></fui-input>
        </view>
        <!--      职位*-->
        <view class="form-item">
          <text class="label">职位 <text class="red_color">*</text></text>
          <fui-input  placeholder="请输入职位" v-model="formData.position"></fui-input>
        </view>


        <!--      参加会议*-->
        <view class="form-item">
          <text class="label">参加会议(多选) <text class="red_color">*</text></text>
          <fui-checkbox-group class="checkbox-group" v-model="formData.conference" @change="handleConferenceChange">
            <view class="checkbox-item" v-for="(item, index) in conferenceOptions" :key="index">
              <fui-checkbox :value="item.value"></fui-checkbox> <view class="name">{{ item.name }}</view>
            </view>
          </fui-checkbox-group>
        </view>



        <!--      来程信息-方式-->
        <view class="form-item">
          <text class="label">来程方式</text>
          <fui-radio-group class="radio-group" v-model="formData.transport_mode" @change="handleTravelModeChange">
            <view class="radio-item" v-for="(item, index) in travelModeOptions" :key="index">
              <fui-radio :value="item.value"></fui-radio> <view class="name">{{ item.name }}</view>
            </view>
          </fui-radio-group>
        </view>

        <!--来成车次-->
        <view class="form-item">
          <text class="label">来成车次 <text class="red_color">*</text></text>
          <fui-input  placeholder="请输入来成车次" v-model="formData.transport_info"></fui-input>
        </view>

        <!--      来程信息-到达时间-->
        <view class="form-item">
          <text class="label">来程到达时间 <text class="red_color">*</text></text>
          <fui-input  placeholder="请选择来程到达时间" v-model="formData.arrival_time" :borderBottom="false"  @click="openArrivalTime()" :clearable="true"></fui-input>

          <fui-date-picker :show="arrival_time_show" type="5" @change="changeArrivalTime" :minDate="minDate" @cancel="cancelArrivalTime"></fui-date-picker>
        </view>

        <!--      是否用车*-->
        <view class="form-item">
          <text class="label">是否用车</text>
          <fui-radio-group class="radio-group" v-model="formData.need_car" @change="changeIsNeedCar">
            <view class="radio-item">
              <fui-radio :value="1"></fui-radio> <view class="name">是</view>
            </view>
            <view class="radio-item">
              <fui-radio :value="2"></fui-radio> <view class="name">否</view>
            </view>
          </fui-radio-group>
        </view>

        <!--      是否用车-乘客人数*-->
        <view class="form-item" v-show="formData.need_car == 1">
          <text class="label">乘客人数 <text class="red_color">*</text></text>
          <fui-input
              type="number"
              placeholder="请输入乘客人数" v-model="formData.passenger_count"></fui-input>
        </view>

        <!--      提交-->
        <view class="fui-btn__box">
          <fui-button text="提交" bold @click="validate"></fui-button>
        </view>
      </fui-form>
    </view>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

	export default {
		data() {
			return {
        meetingSubjectId:'',//会议主题id


        meetingList:[],//会议子表信息

        //校验规则
        rules: [
          {
            name: "name",
            rule: ["required"],
            msg: ["请输入姓名"]
          },
          {
            name: "phone",
            rule: ["required", "isMobile"],
            msg: ["请输入手机号", "请输入正确的手机号"]
          }
        ],

        // 可选的会议列表
        conferenceOptions: [
          // { id: '1', name: '会议一' ,value:'1'},
          // { id: '2', name: '会议二' ,value:'2'},
          // { id: '3', name: '会议三' ,value:'3'},
          // { id: '4', name: '会议四' ,value:'4'}
        ],

        // 单选选项列表
        travelModeOptions: [
          { value: '1', name: '飞机' },
          { value: '2', name: '火车' },
          { value: '3', name: '乘车' },
          { value: '4', name: '轮渡' }
        ],


        minDate:'',//最小可选择的时间
        arrival_time_show: false,//是否展示时间选择器

        formData: {
          meeting_subject_id:'',
          name: '',                // 姓名
          phone: '',              // 电话
          enterprise: '',             // 企业
          position: '',            // 职位
          conference: [],          // 参加会议
          transport_mode: '',          // 来程信息 - 方式
          transport_info: '',         // 来程信息 - 车次
          arrival_time: '',         // 来程信息 - 到达时间
          need_car: 2,             // 是否用车|1=是,2=否
          passenger_count: ''       // 是否用车 - 乘客人数
        }
			}
		},
    onLoad(options) {
      if (options.meetingSubjectId) {
        this.meetingSubjectId = options.meetingSubjectId
      }
    },
    onShow() {
      this.init()
    },
		methods: {
		  async init(){
        this.getMinDate()//获取时间
        //获取会议子表信息
        await this.getSeatImageList()
        await this.getMeetingAppointment()
      },



      //获取会议子表信息
      async getSeatImageList(){
        let params = {
          meeting_subject_id:this.meetingSubjectId
        }
        let res = await apiRoute.getSeatImageList(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.meetingList = res.data

        this.meetingList.forEach((v,k)=>{
          this.conferenceOptions.push({
            id: v.id,
            name: v.title,
            value: v.id
          })
        })

      },

      //获取会议预约记录
      async getMeetingAppointment(){
        let params = {
          meeting_subject_id:this.meetingSubjectId
        }
        let res = await apiRoute.getMeetingAppointment(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        if(res.data.id || null){
          this.formData = res.data
        }


      },





      getMinDate(){
		    //获取今日的时间 拼接00:00 如2025-07-10 00:00
        this.minDate = new Date().toLocaleDateString().replace(/\//g, '-') + ' 00:00'
      },

		  //时间选择器
		  openArrivalTime(){
		    this.arrival_time_show = true
      },
      cancelArrivalTime(){
        this.arrival_time_show = false
      },
      changeArrivalTime(e){
        this.formData.arrival_time = e.result
		    this.cancelArrivalTime()
      },

		  //监听来程方式
      handleTravelModeChange(e) {
        console.log('选中方式:', e);
      },
		  //监听会议选择
      handleConferenceChange(e) {
        console.log('选中会议:', e); // 返回选中的 value 数组
      },
      //监听是否用车
      changeIsNeedCar(e){
		    this.formData.need_car = e.detail.value
        if(e.detail.value == 2){
          this.formData.passenger_count = ''//重置乘车人数
        }
      },

      //验证
      async validate() {
        this.$refs.form.validator(this.formData, this.rules).then(res => {
          if (res.isPassed) {
            // this.fui.toast('校验通过！')
            this.submit()
          }
        }).catch(err => {
          console.log(err)
        })
      },

      //提交-发送请求
      async submit() {


        let params = JSON.parse(JSON.stringify(this.formData))
        params.meeting_subject_id = this.meetingSubjectId
        let res = await apiRoute.addMeetingAppointment(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        //延迟1.5s执行跳转到index页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)

      },
		}
	}
</script>

<style lang="less" scoped>
.main_section{
  padding: 20rpx;
  .title_section{
  margin-top: 30rpx;
  .title{
    font-size: 40rpx;
    font-weight: 600;
    color: #2a82e4;
  }
}
  .form_section{
    margin-top: 20rpx;
    .fui-form__wrap{
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .form-item{
        .label{
          font-size: 30rpx;
          font-weight: 600;
          .red_color{
            margin-left: 10rpx;
            color: red;
          }
        }
        ::v-deep .uni-input-input{
          padding-left: 10rpx !important;
        }
        ::v-deep .fui-input__wrap{
          margin-top: 10rpx !important;
          border: 1px solid #999999;
          padding: 10rpx 0 !important;
        }
        ::v-deep .fui-input__placeholder{
          padding-left: 10rpx !important;
        }
        .checkbox-group{
          margin-top: 10rpx;
          display: flex;
          flex-direction: column;
          gap: 15rpx;
          ::v-deep .checkbox-item{
            display: flex;
            align-items: center;
            .name{
              margin-left: 10rpx;
            }
          }
        }
        .radio-group{
          margin-top: 10rpx;
          display: flex;
          flex-direction: column;
          gap: 15rpx;
          ::v-deep .radio-item{
            display: flex;
            align-items: center;
            .name{
              margin-left: 10rpx;
            }
          }
        }

      }
    }
    .fui-btn__box{
      margin-top: 40rpx;
      margin-bottom: 30rpx;
    }
  }
}
</style>
